<template>
    <div class="uploadImage">
        <el-upload action="" list-type="picture-card" :on-preview="handlePictureCardPreview" :limit="fileNumber"
            :on-remove="handleRemove" ref="multiUpload" :file-list="fileList" :http-request="handleUpload"
            :class="listLengthTag === fileNumber ? 'hide_box' : ''">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="show" max-width="500">
            <img width="500px" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>
  
<script>
import { Upload } from 'element-ui';
import { getFileName } from '@/utils/fileUtils'
import { noSelectText } from '@/utils/styleUtils'

export default {
    name: "vUpload",
    components: {
        elUpload: Upload
    },
    props: {
        url: {
            type: String,
            require: false
        },
        value: {},
        width: {
            type: Number,
        },
        height: {
            type: Number,
        },
        fileSize: {
            type: Number,
            default: 5
        },
        fileNumber: {
            type: Number,
            default: 5
        }
    },
    data() {
        return {
            showBtn: false,
            show: false,
            dialogImageUrl: "https://lmg.jj20.com/up/allimg/1114/052421102013/210524102013-8-1200.jpg",
            avatarStyle: {
                width: this.width + 'px',
                height: this.height + 'px',
                'line-height': this.height + 'px'
            },
            fileList: [],
            // 用来判断是否展示上传框
            listLengthTag: 0
        }
    },
    mounted() {
        if (!this.value || this.value.length <= 0) {
            return;
        }
        this.fileList = this.value.map(f => {
            return { response: f, url: f }
        });
    },
    watch: {
        value: {
            deep: true,
            handler(val) {
                if ((typeof val) === "string") {
                    this.dialogImageUrl = val;
                }
            }
        }
    },
    methods: {
        async handleUpload(params) {
            const file = params.file;
            const fileType = file.type;
            const isImage = fileType.indexOf('image') !== -1;

            const isLtM = file.size < this.fileSize * 1024 * 1024;

            if (!isLtM) {
                this.$message.error(`上传图片或视频大小不能超过 ${this.fileSize}MB!`);
                return;
            }

            if (!isImage) {
                this.$message.error('请选择图片!');
                return;
            }
            // 准备上传表单数据
            const formData = new FormData();
            formData.append("file", file);
            formData.append("filename", getFileName(file.name))
            this.$http.post(this.url, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
                .then(resp => {
                    let files = this.$refs.multiUpload.uploadFiles;
                    files[files.length - 1].response = "https://lmg.jj20.com/up/allimg/1114/052421102013/210524102013-8-1200.jpg";
                    this.fileList = files;
                    this.$emit("input", files.map(f => f.response))
                    // 图片上传成功赋值当前列表length
                    this.listLengthTag = this.fileList.length
                    // 将图片设置为指定宽高
                    let imgs = document.querySelectorAll(".el-upload-list--picture-card .el-upload-list__item");
                    imgs.forEach(element => {
                        element.style.width = this.width + 'px';
                        element.style.height = this.height + 'px';
                        element.style.margin = '0px 8px 0px 0px';
                    })
                }).catch(function (err) {
                    console.error(err)
                });
        },
        handleRemove(file, fileList) {
            this.fileList = fileList;
            this.$emit("input", fileList.map(f => f.response))
            // 删除图片把当前图片列表的length赋值给listLength
            this.listLengthTag = file.length
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.response;
            this.show = true;
        },
        removeSingle() {
            this.dialogImageUrl = "";
            this.$refs.singleUpload.clearFiles();
        },
        mouseoverHandler(e) {
            this.showBtn = true
        },
        mouseoutHandler(e) {
            this.showBtn = false
        }
    },
    mounted() {
        //禁止光标和复制
        noSelectText(".uploadImage");
        let imgs = document.querySelectorAll(".el-upload--picture-card");
        imgs.forEach(element => {
            element.style.width = this.width + 'px';
            element.style.height = this.height + 'px';
            element.style.lineHeight = this.height + 'px';
            element.style.marginBottom = '5px'
        })
    }
}
</script>
  
<style scoped lang="scss">
.logo-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    float: left;
}

.logo-uploader:hover {
    border-color: #409EFF;
}

.logo-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    text-align: center;
}

.remove-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%);
    color: #f8f8f8;
    font-size: 22px;
}

.hide_box ::v-deep {
    .el-upload--picture-card {
        display: none;
    }
}

.amplifier {
    width: 680px;
    border-radius: 5px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    box-shadow: 1px 2px 3px bisque;
    max-width: 100%;
    height: auto;

}
</style>
  